///////////////////////////////////////////////
//              实现标签页的切换              // 
///////////////////////////////////////////////

function initSwitchTab() {
    // 1. 获取相关元素(标签页按钮. 会话列表, 好友列表)
    let tabSession = document.querySelector('.tab .tab-session');
    let tabFriend = document.querySelector('.tab .tab-friend');
    // querySelectorAll 可以同时选中多个元素, 得到的结果是个数组
    let lists = document.querySelectorAll('.list');
    // 2. 针对标签页按钮, 注册点击事件
    //    点击会话标签按钮, 就把会话标签按钮的背景图进行设置
    //    把会话列表显示出来, 好友卡列表隐藏
    //    点击好友按钮, 就把好友按钮背景图片重新设置
    //    显示好友列表, 隐藏会话列表
    
    // a) 设置图标
    tabSession.onclick = function() {
        tabSession.style.backgroundImage = 'url(img/对话1.png)';
        tabFriend.style.backgroundImage = 'url(img/用户2.png)';

        lists[0].classList = 'list';
        lists[1].classList = 'list hide';
    }

    tabFriend.onclick = function() {
        tabSession.style.backgroundImage = 'url(img/对话2.png)';
        tabFriend.style.backgroundImage = 'url(img/用户1.png)';
        
        lists[0].classList = 'list hide';
        lists[1].classList = 'list';
    }
}

initSwitchTab();


///////////////////////////////////////////////
//         从服务器获取到用户登录数据          // 
///////////////////////////////////////////////

function getUserInfo() {
    $.ajax({
        type: 'get',
        url: '/userInfo',
        success: function(body) {
            if(body.userId && body.userId > 0) {
                let userDiv = document.querySelector('.main .left .user');
                userDiv.innerHTML = body.username;
                userDiv.setAttribute("user-id", body.userId);
            } else {
                // 没登录, 跳到登录页面
                alert("当前用户未登录!");
                location.assign('login.html');
            }
        }
    });
}
getUserInfo();

function getFriendList() {
    $.ajax({
        type: 'get',
        url: '/friendList',
        success: function(body) {
            // 清空好友列表
            let friendListUL = document.querySelector('#friend-list');
            friendListUL.innerHTML = '';

            // 遍历 body 把服务器响应的结果加到 当前的 friend-list 中
            for (let friend of body) {
                let li = document.createElement('li');
                li.innerHTML = '<h4>' + friend.friendName + '</h4>';
                // 此处把 friendId 纪录下来, 以备后用
                li.setAttribute('friend-id', friend.friendId);
                friendListUL.appendChild(li);
            }
        },
        error: function() {
            console.log('获取好友 列表失败!');
        }
    });
}
getFriendList();

function getSessionList() {
    $.ajax({
        type: 'get', 
        url: '/sessionList',
        success: function(body) {
            // 清空原来的会话列表
            let sessionListUL = document.querySelector('#session-list');
            sessionListUL.innerHTML = '';

            for (let session of body) {
                // 针对 lastMessage 的长度进行截断处理
                if (session.lastMessage.length > 10) {
                    session.lastMessage = session.lastMessage.substring(0, 10) + '...';
                }
                let li = document.createElement('li');
                // 保存会话 Id 到 li 标签的属性这中
                li.setAttribute('message-session-id', session.sessionId);
                li.innerHTML = '<h3>' + session.friends[0].friendName + '<h3>' + 
                '<p>' + session.lastMessage + '</p>';
                sessionListUL.appendChild(li);

                // 给 li 标签新增一个点击事件
                li.onclick = function() {
                    // 这个写法就能保证点击哪个 li 标签, clickSession() 就能拿到哪个 li 标签
                    clickSession(li);
                }
            }
        }
    });
}

getSessionList();

function clickSession(currentLi) {
    // 1. 设置高亮
    let allLis = document.querySelector('#session-list>li');
    activeSession(allLis, currentLi);
    // 2. 获取指定会话的历史消息 TODO 
    let sessionId = currentLi.getAttribute("message-session-id");
    getHistoryMessage(sessionId);
}

function activeSession() {
    for (let li of allLis) {
        if (li == currentLi) {
            li.className = 'selected';
        } else {
            li.className = '';
        }
    }
}

function getHistoryMessage() {

}
